//导入router的路由模式
import {createRouter, createWebHistory} from "vue-router"
//导入进度条组件
import NProgress from "nprogress"
import "nprogress/nprogress.css"
//导入Layout
import Layout from "@/layout/Layout.vue"


//路由规则
const routes = [
    {
        path: '/login',  //url路径
        component: () => import('@/views/login/Login.vue'),  //视图组件
        icon: "odometer",  //图标
        meta: {title: "登录", requireAuth: false},  //meta元信息
    },
    {
        path: '/',
        redirect: '/home' //重定向
    },
    {
        path: '/home',
        component: Layout,
        icon: 'odometer',
        children: [
            {
                path: '/home',
                name: '概要',
                icon: 'odometer',
                component: () => import('@/views/home/Home.vue'),
                meta: {title:"概要", requireAuth: false},
            }
        ]
    },
    {
        path: '/cluster',
        name: '集群',
        component: Layout,
        icon: 'home-filled',
        meta: {title: '集群', requireAuth: true},
        children: [
            {
                path: '/cluster/node',
                name: 'Node',
                icon: 'el-icon-s-data',
                meta: {title: 'Deployment', requireAuth: true},
                component: () => import('@/views/node/Node.vue')
            },
            {
                path: '/cluster/namespace',
                name: 'Namespace',
                icon: 'el-icon-s-data',
                meta: {title: 'Namespace', requireAuth: true},
                component: () => import('@/views/node/Namespace.vue')
            },            {
                path: '/cluster/persistentvolume',
                name: 'PersistentVolume',
                icon: 'el-icon-s-data',
                meta: {title: 'PersistentVolume', requireAuth: true},
                component: () => import('@/views/node/PersistentVolume.vue')
            },
        ]
    },
    {
        path: '/workflow',
        component: Layout,
        icon: "VideoPlay",
        children: [
            {
                path: "/workflow",
                name: "工作流",
                icon: "VideoPlay",
                meta: {title: "工作流", requireAuth: true},
                component: () => import('@/views/workload/Workflow.vue')
            }
        ]
    },
    {
        path: '/workload',
        name: '工作负载',
        component: Layout,
        icon: 'menu',
        meta: {title: '工作负载', requireAuth: true},
        children: [
            {
                path: '/workload/deployment',
                name: 'Deployment',
                icon: 'el-icon-s-data',
                meta: {title: 'Deployment', requireAuth: true},
                component: () => import('@/views/workload/Deployment.vue')
            },
            {
                path: '/workload/pod',
                name: 'Pod',
                icon: 'el-icon-document-add',
                meta: {title: 'Pod', requireAuth: true},
                component: () => import('@/views/workload/Pod.vue')
            },
            {
                path: '/workload/daemonset',
                name: 'DaemonSet',
                icon: 'el-icon-document-add',
                meta: {title: 'DaemonSet', requireAuth: true},
                component: () => import('@/views/workload/DaemonSet.vue')
            },
            {
                path: '/workload/statefulset',
                name: 'StatefulSet',
                icon: 'el-icon-document-add',
                meta: {title: 'StatefulSet', requireAuth: true},
                component: () => import('@/views/workload/StatefulSet.vue')
            }
        ]
    },
    {
        path: '/loadbalance',
        name: '负载均衡',
        component: Layout,
        icon: 'files',
        meta: {title: '负载均衡', requireAuth: true},
        children: [
            {
                path: '/loadbalance/service',
                name: 'Service',
                icon: 'el-icon-s-data',
                meta: {title: 'Service', requireAuth: true},
                component: () => import('@/views/loadbalance/Service.vue')
            },
            {
                path: '/loadbalance/ingress',
                name: 'Ingress',
                icon: 'el-icon-s-data',
                meta: {title: 'Ingress', requireAuth: true},
                component: () => import('@/views/loadbalance/Ingress.vue')
            },
        ]
    },
    {
        path: '/storage',
        name: '存储',
        component: Layout,
        icon: 'tickets',
        meta: {title: '存储', requireAuth: true},
        children: [
            {
                path: '/storage/pvc',
                name: 'Pvc',
                icon: 'tickets',
                meta: {title: 'Pvc', requireAuth: true},
                component: () => import('@/views/storage/Pvc.vue')
            },
            {
                path: '/storage/secret',
                name: 'Secret',
                icon: "el-icons-document-add", //图标
                meta: {title:"Secret", requireAuth: true}, //定义meta元数据
                component: () => import('@/views/storage/Secret.vue')
            },
            {
                path: '/storage/configmap',
                name: 'ConfigMap',
                icon: "el-icons-document-add", //图标
                meta: {title:"ConfigMap", requireAuth: true}, //定义meta元数据
                component: () => import('@/views/storage/Configmap.vue')
            },
        ]
    },
    {
        path: '/404',
        meta: {title: "404", requireAuth: true},
        component: () => import('@/views/common/404.vue')
    },
    {
        path: '/403',
        meta: {title: "403", requireAuth: true},
        component: () => import('@/views/common/403.vue')
    },
    //其他路径跳转至404页面
    {
        path: '/:pathMatch(.*)',
        redirect: '/404',
    },
]
//创建路由实例
const router = createRouter({
//hash模式：createWebHashHistory
//history模式：createWebHistory
    history: createWebHistory(),
    routes
})

//递增进度条，将获取当前状态值并添加0.2直到状态为0.994
NProgress.inc(0.2)
//easing 动画字符串
//speed 动画速度
//showSpinner 进度环显示隐藏
NProgress.configure({ easing: 'ease', speed: 600, showSpinner: false })

//router.beforeEach() 用来做一些进入页面的限制，比如未登录，就不能进入页面
//页面，只有登录了之后才有权限查看某些页面，也就是路由守卫
//to 要去某个页面的属性
//from 从哪个页面来的属性
//next 处理路由跳转及放行
router.beforeEach((to, from, next) => {
    // 启动进度条
    NProgress.start()
    // 设置头部
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = "Kubernetes"
    }
    //放行
    next()
})

//钩子函数对路由进行权限跳转
//路由守卫，路由拦截
router.beforeEach((to, from, next) => {
    //启动进度条
    NProgress.start()
    //设置头部
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = "Kubernetes"
    }
    // 放行
    if (window.location.pathname == '/login') {
        next()
    }else {
        // 获取localStorage中保存的Token和过期时间
        const storedToken = localStorage.getItem('token');
        if (!storedToken) {
            // 删除localStorage中保存的Token和过期时间
            localStorage.removeItem('token');
            // 如果当前不在登录页面，则跳转到登录页面
            if (window.location.pathname !== '/login') {
                window.location.href = '/login';
            }
        } else {
            next()
        }
    }
})


router.afterEach( () => {
    //关闭进度条
    NProgress.done()
})

//抛出路由实例，在main.js中引用
export default router

